<template>
    <div>
        <SuperTable ref="table" path="/user/index" :params="params" :columns="columns">
            <div slot="header-right">
                <Form ref="filter" :model="filter" inline>
                    <FormItem label="手机号">
                        <Input v-model="filter.phone" clearable placeholder="请输入手机号搜索" style="width: 240px;" />
                    </FormItem>
                    <Button type="primary" @click="handlFilter">筛选</Button>
                </Form>
            </div>
        </SuperTable>
    </div>
</template>

<script>
import SuperTable from '@/components/utils/super-table.vue';
import TableRows from '@/components/utils/table-rows.vue';
export default {
    components: {
        SuperTable,
        TableRows
    },
    data() {
        return {
            submiting: false,
            filter: {
                phone: '',
            },
            params: {
                page: 1,
                pageSize: 10
            },
            columns: [
                {
                    title: '用户信息',
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.avatar || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',`手机号：${params.row.phone}`)
                        ])
                    }
                },
                {
                    title: '注册时间',
                    key: 'created_at'
                },
                {
                    title: "操作",
                    align: "center",
                    key: "action",
                    width: 140,
                    render: (h, params) => {
                        return h("div", []);
                    }
                }
            ]
        }
    },
    methods: {
        handlFilter() {
            const { filter } = this;
            this.params.phone = filter.phone;
            this.$refs.table.init();
        }
    }
}
</script>